<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/12/30
  Time: 10:51
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--jquery核心包-->
    <script type="text/javascript" src="${ctx}/js/jquery.min.js" ></script>
    <!--easyui-->
    <script type="text/javascript" src="${ctx}/js/jquery.easyui.min.js" ></script>
    <script type="text/javascript" src="${ctx}/js/extJquery.js" ></script>
    <script type="text/javascript" src="${ctx}/js/extEasyUI.js" ></script>
    <script type="text/javascript" src="${ctx}/js/easyui-lang-zh_CN.js" ></script>

    <!--easyui样式引入-->
    <link rel="stylesheet" href="${ctx}/css/themes/default/easyui.css" />
    <link rel="stylesheet" href="${ctx}/css/themes/icon.css" />
    <link rel="stylesheet" href="${ctx}/css/style.css" />
</head>
<body>
<script>
    var tg;
    $(function(){
        var $edit = ${fn:contains(btnMap.rc, 'editRole')};
        var $remove = ${fn:contains(btnMap.rc, 'removeRole')};
        tg = $('#roleTable').datagrid({
            url:'${ctx}/rc/find',//获取数据的地址，返回值为list
            fit:true,
            idField:'id',
            rownumbers:true,
            singleSelect:true,
            columns:[[
                {field:'ck',checkbox:true},
                {field:'roleName',title:'角色名称',width:100,align:'center'},
                {field:'status',title:'状态',width:50,
                    formatter:function(v,r,i){
                        if(v=='0'){
                            v = "<font style='color:blue'>可用</font>";
                        }else{
                            v = "<font style='color:red'>不可用</font>";
                        }
                        return v;
                    }
                },
                {field:'createTime',title:'创建时间',width:200},
                {field:'active',title:'操作',width:200,align:'center',
                    formatter:function(v,r,i){
                        var str = '';
                        if($edit){
                            str += '<a href="#" onclick="editData('+r.id+')">编辑</a>';
                            str += '&nbsp;|&nbsp;';
                        }
                        if($remove){
                            str += '<a href="#" style="color:red" onclick="deleteData('+r.id+')">删除</a>';
                        }
                        return str;
                    }
                }
            ]],
            onLoadSuccess:function () {
                showMenuTree('');
            },
            onClickRow:function (index,row) {
                rid = row.id;
                var cs = tg.datagrid('getChecked');
                if(cs.length==0){
                    showMenuTree('');
                }else {
                    showMenuTree(rid);
                }
            },
            onCheck:function (index,row) {
                rid = row.id;
                showMenuTree(rid);
            },
            onUncheck:function (index,row) {
                showMenuTree('');
            },
        });
    });
    function addData(){
        openDialog('新增数据','');
    }
    function editData(id){
        openDialog('编辑数据',id);
    }
    function deleteData(id){
        if(confirm("是否真的要删除该条记录?")){
            //数据提交
            $.ajax({
                type:'get',
                url:'${ctx}/uc/removeRole/'+id,
                dataType:'json',
                success:function(result){
                    alert(result.msg);
                    if(result.is){
                        tg.datagrid('reload');
                    }
                }
            });
        }
    }
    function openDialog(title,id){
        var url = "${ctx}/rc/add";
        if(id!=""){
            url = "${ctx}/rc/edit";
        }
        $('#d1').dialog({
            title:title,
            width:500,
            height:450,
            modal:true,
            href:'${ctx}/rc/aoe?id='+id,
            buttons:[
                {
                    text:'保存',
                    iconCls:'icon-save',
                    handler:function(){
                        var f = $("#dataForm");
                        var data = f.serialize();
                        $.ajax({
                            type:"post",
                            url:url,
                            data:data,
                            dataType:'json',
                            success:function(result){
                                alert(result.msg);
                                if(result.is){
                                    $('#d1').dialog('close');
                                    tg.datagrid('reload');
                                }
                            }

                        });
                    }
                },{
                    text:'取消',
                    iconCls:'icon-cancel',
                    handler:function(){
                        $('#d1').dialog('close');//关闭对话框
                    }
                }
            ]
        });
    }
    function searchData() {
        var f = $("#searchForm");
        var data = f.serialize();
        $.ajax({
            type:'post',
            url:'${ctx}/rc/find',
            data:data,
            dataType:'json',
            success:function (result) {
                tg.treegrid('loadData',result);
            }
        })
    }
    function showMenuTree(rid){
        $('#menuTree').tree({
            method:'post',
            checkbox:true,
            line:true,
            cascadeCheck:false,
            url:'${ctx}/mc/find',
            loadFilter:function (data) {
                return convert(data);
            },
            onLoadSuccess:function (node,data) {
                if(rid!=''){
                    $.ajax({
                        type:'post',
                        url:'${ctx}/rc/findRoleMenu',
                        data:{
                            rid:rid
                        },
                        dataType:'json',
                        success:function(result){
                            if(result.length>0){
                                for(var i=0;i<result.length;i++){
                                    var node = $("#menuTree").tree('find',result[i]);
                                    if(node){
                                        $("#menuTree").tree('check',node.target);
                                    }
                                }
                            }
                        }
                    })
                }
            }
        });
    }
    function  grantRole() {
        var row = tg.datagrid('getSelected');
        if(row==null){
            alert("请选择授权的角色!");
            return;
        }
        var mids = [];//保存选择的菜单id
        var ms = $('#menuTree').tree('getChecked');
        $.each(ms,function (i,m) {
           mids.push(m.id);//把值加入数组
        });
        $.ajax({
            type:'post',
            url:'${ctx}/rc/grantRole',
            data:{
                mids:JSON.stringify(mids),
                rid:row.id
            },
            dataType:'json',
            success:function(result){
                alert(result.msg);
            }
        });
    }
</script>
<style>
    #tb{
        margin: 10px 20px;
    }
    #tb td{
        line-height: 20px;
    }
</style>
<div id="cc_user" class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',title:'',split:false" style="height:50px;">
        <form id="searchForm">
            <table id="tb">
                <tr>
                    <td>角色名称:&nbsp;</td>
                    <td>
                        <input class="easyui-textbox" name="roleName" />
                        &nbsp;
                    </td>
                    <td>创建日期:&nbsp;</td>
                    <td>
                        <input class="easyui-datebox" name="startTime" />
                        -
                        <input class="easyui-datebox" name="endTime" />
                        &nbsp;
                    </td>
                    <td>
                        <a class="easyui-linkbutton"
                           data-options="iconCls:'icon-search'" onclick="searchData()">查询</a>
                        &nbsp;
                        <c:if test="${fn:contains(btnMap.rc, 'addRole')}">
                        <a class="easyui-linkbutton"
                           data-options="iconCls:'icon-eadd'" onclick="addData()">新增</a>
                        </c:if>
                        <c:if test="${fn:contains(btnMap.rc, 'grant')}">
                        <a class="easyui-linkbutton"
                           data-options="iconCls:'icon-save'" onclick="grantRole()">角色授权</a>
                        </c:if>
                    </td>
                </tr>
            </table>
        </form>
    </div>
    <div data-options="region:'center'"
         style="padding:0px;background:#eee;">
        <div id="cc2" class="easyui-layout" data-options="fit:true">
           <div data-options="region:'east',title:'授权管理',split:true"
                style="width:300px;">
               <ul id="menuTree"></ul>
           </div>
           <div data-options="region:'center',title:'数据表格'"
                style="padding:0px;background:#eee;">
               <table id="roleTable"></table>

           </div>
        </div>
    </div>
</div>
<div id="d1"></div>
</body>
</html>

